<template>
  <el-dialog :visible.sync="show" title="分配员工角色" @close="close">
    <el-checkbox-group v-model="checkbox">
      <el-checkbox v-for="v in list" :key="v.id" :label="v.id">{{ v.name }}</el-checkbox>
    </el-checkbox-group>

    <template #footer>
      <div style="text-align: center;">
        <el-button type="primary" @click="quer">确认</el-button>
        <el-button @click="show= false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<!--

 完成弹出框内容
   1.利用请求回数据做存储
   2.利用存储数据for循环渲染

 数据回显
   1.打开弹出框 调用接口
   2.拿到数据赋值 checkbox

 接口调用
   3.在用checkbox勾选到的值会自动存储到checkbox
   4.在发请求上传选中的数据

-->
<script>
import { sysrole } from '@/api/gonshi.js'
import { sysuser } from '@/api/user'
import { sysuserassignRoles } from '@/api/yuangon'
export default {

  data() {
    return {
      show: false,
      checkbox: [],
      list: [],
      // 将传回的角色信息存储到data，保存角色权限要使用
      id: ''

    }
  },
  created() {
    this.getdata()
    // console.log(this.getdata(), 'xxxxxxxxxxxxxxxxx')
  },
  methods: {
    async getdata() {
      const res = await sysrole({
        page: 1,
        pagesize: 9999
      })

      this.list = res.data.data.rows
      console.log(res)
    },
    // 回显数据
    async huixian(id) {
      // 将传回的角色信息存储到data，保存角色权限要使用
      this.id = id

      const res = await sysuser(id)
      this.checkbox = res.data.data.roleIds
      console.log(res)
    },
    // 保存角色权限信息
    async quer() {
      await sysuserassignRoles({
        id: this.id,
        roleIds: this.checkbox
      })

      this.show = false
      this.$message.success('修改成功')
    },

    // 关闭弹出框
    close() {
      this.checkbox = []
    }
  }

}
</script>

<style>

</style>
